<!--
- Author:   .
- Date:    2017/7/12 0012.
- File:    detail.
-->
<template>
  <div>
    <div class="Web_Box">
      <div class="order_top" v-if="!orderInfo.order_info.extend_refund">
        <!--<h3 v-show="orderInfo.order_info.is_self == '0'">{{orderInfo.order_info.order_state | orderStatusTxt}}</h3>-->
        <!--<h3 v-show="orderInfo.order_info.is_self == '1'">{{orderInfo.order_info.order_state | orderStatusTxt2}}</h3>-->
        <!--<p class="f22" v-show="orderInfo.order_info.order_state == $dictionary.orderStatus.payed && orderInfo.order_info.is_self == '0'">卖家将尽快发货，请耐心等待</p>-->
        <!--<p class="f22" v-show="orderInfo.order_info.order_state == $dictionary.orderStatus.payed && orderInfo.order_info.is_self == '1'">卖家将尽快配货，请耐心等待</p>-->
        <!--<p class="f22" v-show="orderInfo.order_info.order_state == $dictionary.orderStatus.sended && orderInfo.order_info.is_self == '0'">卖家已发货，请等待快递员送货</p>-->
        <!--<p class="f22" v-show="orderInfo.order_info.order_state == $dictionary.orderStatus.sended && orderInfo.order_info.is_self == '1'">卖家已配货，请前往门店提取</p>-->
        <p class="f22" v-show="orderInfo.order_info.order_state == $dictionary.orderStatus.unpay && !payTimeout">剩余<span>{{payTimeRemain.hours}}</span>小时<span>{{payTimeRemain.minutes}}</span>分<span>{{payTimeRemain.seconds}}</span>秒自动取消订单
        </p>
        <h3 v-show="orderInfo.order_info.refund_state == '0' && orderInfo.order_info.order_state == $dictionary.orderStatus.unpay && payTimeout">订单付款超时，已自动取消</h3>
        <h3 v-show="orderInfo.order_info.refund_state == '0' && orderInfo.order_info.order_state == $dictionary.orderStatus.cancle">订单已取消</h3>
        <h3 v-show="orderInfo.order_info.refund_state == '0' && orderInfo.order_info.order_state == $dictionary.orderStatus.recevied">恭喜您成为会员！</h3>
        <h3 v-show="orderInfo.order_info.refund_state == '2'">退款成功</h3>
      </div>
      <div class="order_top" v-if="orderInfo.order_info.extend_refund">
        <h3>{{orderInfo.order_info.extend_refund.seller_state | refundStatusName}}退款</h3>
      </div>
      <div class="ConfirmationOrder">
        <!--<div class="ConsigneeInfo">-->
          <!--<p class="text1">-->
            <!--<span class="name fl">-->
              <!--<span v-show="orderInfo.order_info.is_self == '0'">收货人:</span>-->
              <!--<span v-show="orderInfo.order_info.is_self == '1'">自提门店:</span>-->
              <!--{{orderInfo.reciver_name}}-->
            <!--</span>-->
            <!--<span class="tel fr">{{orderInfo.add_list.mob_phone}}</span></p>-->
          <!--<div class="Address slh2">{{orderInfo.add_list.area}} {{orderInfo.add_list.address}}</div>-->
        <!--</div>-->
        <div class="ShopGoods EditPro hidden bor_b_dcdddd">
          <div class="order_ts" v-show="memberInfo.is_brush_man == '1' && orderInfo.order_info.order_state == $dictionary.orderStatus.payed && orderInfo.order_info.is_needship == '0'">此订单获得{{(!userLv || userLv == $dictionary.userLv.a) ? parseFloat(orderInfo.order_info.order_amount) + parseFloat(orderInfo.order_info.get_freeze_balance || 0) : orderInfo.order_info.get_freeze_balance}}积分</div>
          <div class="ProList">
            <div class="oeder_tex">订单号:{{orderInfo.order_info.order_sn}}</div>
            <ul>
              <li v-for="item in orderInfo.order_info.extend_order_goods">
                <div class="Pic"><img :src="hostName + $config.goodsImgSrc + item.goods_image" alt=""/></div>
                <div class="Con">
                  <div class="pl20">
                    <span class=" Nums">×{{item.goods_num}}</span>
                    <h2 class="">{{item.goods_name}}&nbsp;&nbsp;<span v-for="attr in item.goods_spec">{{attr.name}} </span>
                    </h2>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="order_list">
          <p class="f-cb">金额<span class="fr">￥{{orderInfo.order_info.goods_amount}}</span></p>
          <!--<p class="f-cb">运费<span class="fr">￥{{orderInfo.order_info.shipping_fee || 0}}</span></p>-->
          <!--<p class="f-cb" v-show="orderInfo.order_info.refund_state == '0'">实付款<span class="fr cr_f60202">￥{{orderInfo.order_info.pay_amount || 0}}</span></p>-->
          <p class="f-cb" v-show="orderInfo.order_info.refund_state == '2'">退款额<span class="fr cr_f60202">￥{{orderInfo.order_info.refund_amount || 0}}</span></p>
        </div>
        <div class="order_list2">
          <ul>
            <li>创建时间:{{orderInfo.order_info.add_time | timestampToDate}}</li>
            <li v-show="orderInfo.order_info.payment_time != 0">付款时间:{{orderInfo.order_info.payment_time | timestampToDate}}</li>
            <li v-show="orderInfo.order_info.refund_state == '2'">退款时间:{{orderInfo.order_info.refund_time | timestampToDate}}</li>
            <li v-show="orderInfo.order_info.order_note">备注:{{orderInfo.order_info.order_note}}</li>
            <li @click="openWindow(orderInfo.order_info.order_state)">收货地址：{{orderInfo.add_list.address}}</li>
          </ul>
          <span style="color: #cc0000;margin-left: 10px;top: 5px">*购买完成点击收货地址可修改</span>
        </div>
      </div>
    </div>
    <div v-show="self && orderInfo.order_info.order_state == $dictionary.orderStatus.unpay && !payTimeout" class="order_btn">
      <!--<a href="javascript:void(0)" @click="cancleOrder(orderInfo.order_info.order_id)" style="color: #000">取消订单</a>-->
      <a href="javascript:void(0)" class="pays" @click="pay" style="width: 100%">付款</a>
    </div>
    <div v-show="self && orderInfo.order_info.order_state == $dictionary.orderStatus.sended" class="order_btn">
      <a  href="javascript:void(0)" @click="gotoHome" style="color: #000">返回平台</a><a href="javascript:void(0)" class="pays" @click="confirmReceived">确认收货</a>
    </div>
    <div class="order_btn" v-show="self && orderInfo.order_info.lock_state != 1 && orderInfo.order_info.order_state == $dictionary.orderStatus.recevied && orderInfo.order_info.evaluation_state == 0">
      <a href="javascript:void(0)" style="width: 100%;color: #000" @click="gotoHome">返回平台</a><a href="javascript:void(0)" v-show="false" class="pays" @click="addComment(orderInfo.order_info.order_id)">立即评价</a>
    </div>
    <div v-show="!self" class="order_btn">
      <a  href="javascript:void(0)" @click="back" style="color: #000; width: 100%">返回</a>
    </div>

    <div v-if="sign == true">
      <div class="PopBg" @click="openWindow('20')"></div>
      <!--选择商品属性弹窗Start-->
      <div class="AttributeSelectionPop " id="AttributeSelectionPop" style="height: 160px">
        <div class="EditReceiptAddress">
          <ul style="height: 100px">
            <li class="sli">
              <div class="lefticon"><i class="iconfont icon-address3"></i></div>
              <div class="fl w550">
                <!--<span>{{memberInfo.member_mobile}}</span>-->
                <input type="tel" class="inp" placeholder="请输入修改的地址" @click="switchAreaSelectShow(true)" v-model="addressEdit.area_info">
              </div>
            </li>
            <li class="sli">
              <div class="lefticon"><i class="iconfont icon-detailedaddress"></i></div>
              <div class="fl w550">
                <input type="text" class="inp" placeholder="填写详细地址" v-model="addressEdit.address">
              </div>
            </li>
          </ul>
        </div>
        <div class="OperationButton f-cb">
          <button type="button" class="bg_45a73a" style="position: absolute;width: 100%;color: #fff;background-color: #e67a7e;border-top:none;bottom: 0" @click="updateAddress">确定</button>
        </div>
      </div>
    </div>
    <!--<div class="BottomGd" v-show="self && orderInfo.order_info.order_state == $dictionary.orderStatus.recevied && orderInfo.order_info.evaluation_state == 1">-->
      <!--<button class="but_2 wauto" type="button" @click="gotoOrderExpress(orderInfo.order_info.order_id)">查看物流</button>-->
    <!--</div>-->
    <!--右侧导航Start-->
    <!--<back-nav :show="!(orderInfo.order_info.order_state == $dictionary.orderStatus.payed || orderInfo.order_info.order_state == $dictionary.orderStatus.cancle)"></back-nav>-->
    <!--<footer-tab :show="orderInfo.order_info.order_state == $dictionary.orderStatus.payed || orderInfo.order_info.order_state == $dictionary.orderStatus.cancle || (orderInfo.order_info.order_state == $dictionary.orderStatus.unpay && payTimeout)"></footer-tab>-->
    <back-nav></back-nav>
    <vue-area :props-show="areaSelectShow" :props-result="result" v-on:result="areaResult"></vue-area>
  </div>
</template>

<script>
  import {MessageBox} from 'mint-ui'
  import payPop from '../../components/payPop'
  import {mapModules, mapRules} from 'vuet'
  import vueArea from '../../components/area'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({once: ['memberInfo']})
    ],
    data() {
      return {
        addressId: this.$route.params.id,
        id: this.$route.params.id,
        self: this.$route.query.self != 'false', // 是否是本人的订单
        userLv: this.$route.query.userLv,
        orderInfo: {add_list: {}, order_info: {extend_order_common: {}, extend_order_goods: {}}},
        autoRecevieTimeRemain: {days: 0, hours: 0, minutes: 0, seconds: 0},
        payTimeRemain: {days: 0, hours: 0, minutes: 0, seconds: 0},
        payTimeRemainInterval: null,
        hostName: 'http://' + window.location.hostname,
        result: null,
        addressIndex: -1,
        areaSelectShow: false,
        sign: false,
        addressEdit: {
          address: '',
          area_id: '',
          area_info: '',
          city_id: '',
          mob_phone: '',
          prov_id: '',
          tel_phone: '',
          true_name: '',
          ycode: '',
          is_default: '0'
        },
        areaTxt: '北京'
      }
    },
    components: {
      'vue-area': vueArea
    },
    created() {
      this.getOrderInfo(this.id)
//      this.getAutoReceiveTimeRemain()
    },
    beforeDestroy() {
      clearInterval(this.payTimeRemainInterval)
    },
    computed: {
      integralGet: function () {
        return parseFloat(this.orderInfo.order_info.order_amount) + parseFloat(this.orderInfo.order_info.order_amount * this.memberInfo.a_rate)
      },
      orderTimeout: function () {
        if (this.autoRecevieTimeRemain.days < 0 || this.autoRecevieTimeRemain.hours < 0 || this.autoRecevieTimeRemain.minutes < 0 || this.autoRecevieTimeRemain.seconds < 0) {
          return true
        }
        return false
      },
      payTimeout: function () {
        if (this.payTimeRemain.days < 0 || this.payTimeRemain.hours < 0 || this.payTimeRemain.minutes < 0 || this.payTimeRemain.seconds < 0) {
          clearInterval(this.payTimeRemainInterval)
          return true
        }
        return false
      }
    },
    methods: {
      openWindow(style) {
        if (style == '20' || style == '30' || style == '40') {
          this.sign = !this.sign
        }
      },
      switchAreaSelectShow(boolValue) {
        this.areaSelectShow = boolValue
      },
      areaResult(areaSelectShow, result) {
        console.log(result)
        this.areaSelectShow = areaSelectShow
        this.result = result
        this.addressEdit.prov_id = result.province.code
        this.addressEdit.city_id = result.city.code
        if (result.area) {
          this.addressEdit.area_id = result.area.code
          this.addressEdit.area_info = result.province.name + ' ' + result.city.name + ' ' + result.area.name
        } else {
          this.addressEdit.area_info = result.province.name + ' ' + result.city.name
        }
      },
      updateAddress() {
        if (!this.addressEdit.area_info) {
          this.$toast('请选择地址')
          return
        }
        if (!this.addressEdit.address) {
          this.$toast('请填写详细地址')
          return
        }
        this.$request.updateAddressOther(this.orderInfo.order_info.order_id, this.addressEdit.area_info, this.addressEdit.address).then(data => {
          this.$toast('操作成功')
          this.sign = false
          this.getOrderInfo(this.id)
        }).catch(e => {
          this.$toast('操作失败:' + e.msg)
        })
      },
      back() {
        this.$router.go(-1)
      },
      gotoHome() {
        this.$router.push({name: 'my'})
      },
      gotoRefundGoodsList(orderId, goodsId) {
        this.$router.push({name: 'refund-goods-list', params: {orderId: orderId, goodsId: goodsId}})
      },
      gotoRefundMoneyList(id) {
        this.$router.push({name: 'refund-list', query: {type: 1}})
      },
      gotoRefundGoodsDetail(id) {
        this.$router.push({name: 'refund-goods-detail', params: {id: id}})
      },
      addRefundGoods(orderId, goodsId) {
        this.$router.push({name: 'refund-goods-add', params: {orderId: orderId, goodsId: goodsId}})
      },
      addRefundMoney(orderId, goodsId) {
        this.$router.push({name: 'refund-money-add', params: {orderId: orderId, goodsId: goodsId}})
      },
      gotoOrderExpress(id) {
        this.$router.push({name: 'order-express', params: {id: id}})
      },
      addComment(id) {
        this.$router.push({name: 'comment-add', params: {id: id}})
      },
      getOrderInfo(id) {
        this.$request.getOrderInfo(id, this.userLv).then(data => {
//          data.order_info.order_state = this.$dictionary.orderStatus.sended
//          data.order_info.shipping_time = 1499908975 // 1500085375
          this.orderInfo = data
//          if (data.order_info.order_state == this.$dictionary.orderStatus.sended) { // 已发货，计算剩余自动收货时间
//            this.getAutoReceiveTimeRemain(data.shipping_time)
//          }
          if (data.order_info.order_state == this.$dictionary.orderStatus.unpay) { // 已发货，计算剩余自动收货时间
            this.getPayTimeRemain(data.order_info.add_time)
            clearInterval(this.payTimeRemainInterval)
            this.payTimeRemainInterval = setInterval(() => {
              this.getPayTimeRemain(data.order_info.add_time)
            }, 1000)
          }
        }).catch(e => {
          this.$toast('获取订单明细失败:' + e.msg)
        })
      },
      getAutoReceiveTimeRemain(shippingTimeTamp) {
        if (shippingTimeTamp) {
          let currentTime = new Date()
          let shippingStartTime = new Date()
          shippingStartTime.setTime(shippingTimeTamp * 1000)
          let shippingEndTime = new Date(shippingStartTime)
          shippingEndTime.setDate(shippingStartTime.getDate() + 7)
          this.autoRecevieTimeRemain = this.$utils.timeDif(currentTime, shippingEndTime)
        }
      },
      getPayTimeRemain(orderTimeTamp) {
        if (orderTimeTamp) {
          let currentTime = new Date()
          let orderTime = new Date()
          orderTime.setTime(orderTimeTamp * 1000)
          let payEndTime = new Date(orderTime.getTime() + 1000 * 60 * 30)
          this.payTimeRemain = this.$utils.timeDif(currentTime, payEndTime)
        }
      },
      cancleOrder(id) {
        MessageBox.confirm(`你确定要取消订单吗?`).then(action => {
          this.$request.cancleOrder(id).then(data => {
            this.$toast('取消订单成功')
            this.$router.go(-1)
          }).catch(e => {
            this.$toast('取消订单失败:' + e.msg)
          })
        }).catch(() => {
        })
      },
      confirmReceived() {
        this.$request.confirmReceived(this.id).then(data => {
          this.$toast('确认收货成功')
          this.$router.go(-1)
        }).catch(e => {
          this.$toast('确认收货失败:' + e.msg)
        })
      },
      pay() {
        if (this.orderInfo.order_info.extend_order_goods[0].goods_id == this.$config.goodsId1 && (this.memberInfo.handle_fee != '0.00' || this.memberInfo.sub_fee != '0.00')) {
          this.$toast('您已付过款了')
          return
        }
        if (this.orderInfo.order_info.extend_order_goods[0].goods_id == this.$config.goodsId2 && (this.memberInfo.bj_sub_fee != '0.00' || this.memberInfo.sub_fee != '0.00')) {
          this.$toast('您已付过款了')
          return
        }
        if (this.orderInfo.order_info.extend_order_goods[0].goods_id == this.$config.goodsId3 && (this.memberInfo.handle_fee != '0.00' || this.memberInfo.bj_sub_fee != '0.00' || this.memberInfo.sub_fee != '0.00')) {
          this.$toast('您已付过款了')
          return
        }
        let paySn = this.orderInfo.order_info.pay_sn
        payPop({paySn: paySn, orderId: this.orderInfo.order_info.order_id})
      }
    }
  }
</script>

<style>

</style>
